<template>
	<div class="box">
		<h2>上传</h2>
		<div class="form-group">
			<label class="control-label">上传图片</label>
			<div class="control-form">
				<p class="help-block">(建议图片格式为：JPEG/BMP/PNG/GIF，大小不超过5M，最多可上传4张)</p>
				<!--<ul class="upload-imgs">
				  <li v-if="imgLen>=4 ? false : true">
					<input type="file" class="upload" @change="addImg" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
					<a class="add"><i class="iconfont icon-plus"></i><p>点击上传</p></a>
				  </li>
				  <li v-for='(value, key) in imgs'>
					<p class="img"><img :src="getObjectURL(value)"><a class="close" @click="delImg(key)">×</a></p>
				  </li>
				</ul>-->
				<my-upload-imgs
						:fileTypes="['jpeg','bmp','gif','jpg','png','xls']"
						:limit="4"
						@imgs="val=>imgs=val" />
				<button @click="submit">提交</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      formData: new FormData(),
      imgs: {}
    };
  },
  methods: {
    submit() {
      console.log(this.imgs);
      for (let key in this.imgs) {
        let name = key.split("?")[0];
        this.formData.append("multipartFiles", this.imgs[key], name);
      }
      this.$http
        .post("/opinion/feedback", this.formData, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(
          () => {
            console.log("提交成功！");
          },
          () => {
            this.formData = new FormData();
          }
        );
    }
  }
};
</script>
